require('./Girdview.styl');
import { Control } from 'react-keeper';
import { Grid, ImageViewer } from 'saltui'
const monStorage = require('clientConfig/util/StoreData').monStorage;
const Storage = require('clientConfig/util/StoreData').Storage;
const ImgUrl = require('clientConfig/util/constants').ImgUrl;
const photomoImage = require('images/img/photomo.png');
import CrossRound from 'salt-icon/lib/CrossRound';
const handleClickDelBtn = (e, index, props) => {
    e.stopPropagation();
    let scoreImgId = '';
    if (props.girdItems[index].hasOwnProperty("scoreImgId")) {
        scoreImgId = props.girdItems[index].scoreImgId
    }
    props.handleClickDelBtn && props.handleClickDelBtn(index, scoreImgId);
}
const Girdview = (props) => {
    let { girdItems, addPhoto } = props;
    if (!girdItems) return;
    for (let [index, item] of girdItems.entries()) {
        if (item.hasOwnProperty("url")) {
            item.src = ImgUrl + item.url;
        }
    }
    //九宫格页面跳转
    let handleLink = (index) => {
        //预览图片
        ImageViewer.show({
            photos: girdItems,
            current: index,
        });
    }
    return (
        <div className="girdview">
            <Grid className="ft14" col={4} square={true} touchable={props.touchable || false} noLine={true}>
                {girdItems && girdItems instanceof Array && girdItems.map((item, index) => {
                    return (<div className="t-MR10 girdview-item" onClick={() => { handleLink(index) }} data-id={index}>
                        {props.canDel && <CrossRound className="icon-cross-round" width="20" height="20" fill="red" onClick={(e) => { handleClickDelBtn(e, index, props) }} />}
                        <img src={item.src ? item.src : (item ? item : photomoImage)} width='75px' height='75px' alt='' />
                    </div>);
                })}
                {props.children}
            </Grid>
        </div>);
}
module.exports = Girdview;
